<template>
  <div class="flex alignCenter" style="margin-bottom: 10px">
    <div style="margin-right: 20px; width: 280px">
      <DatePicker v-model="params.year" type="year"></DatePicker>
    </div>
    <courseQuery v-model="params.curriculum_id" multiple="1"></courseQuery>
  </div>

  <!-- <bar id="2" titleText="魔学院分析" :size="props.gridHeight-32-35" :seriesData="seriesData" :xAxisData="xAxisData" v-if="list.length"></bar> -->

  <el-table :data="list" :height="props.gridHeight - 105" show-summary>
    <el-table-column type="index" label="序号" width="80" />
    <el-table-column
      prop="curriculum_name"
      label="课程名称"
      width="450"
      show-overflow-tooltip
    />
    <el-table-column prop="total" label="总账号" align="right" />
    <el-table-column prop="enabled" label="开启账号" align="right" />
    <el-table-column prop="disabled" label="关闭" align="right" />
  </el-table>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
let props = defineProps(["gridHeight"]);

let params = ref({
  year: proxy.$utils.dateTimeFormateFn(Date.now(), "year"),
  curriculum_id: "",
});
let list = ref([]);

let seriesData = computed(() => {
  let arr1 = [];
  let arr2 = [];
  let arr3 = [];
  list.value.forEach((element) => {
    arr1.push(element.curriculum_open);
    arr2.push(element.curriculum_close);
    arr3.push(element.curriculum_open + element.curriculum_close);
  });
  let aa = [
    {
      name: "总账号数",
      type: "bar",
      label: {
        show: true, // 显示标签
        position: "top", // 标签位置：在顶部
        formatter: "{c}", // 标签内容格式，这里用 {c} 表示数据值
      },
      barWidth: "40px",
      emphasis: { focus: "series" },
      data: arr3,
    },
    {
      name: "开启人数",
      type: "bar",
      label: {
        show: true, // 显示标签
        position: "top", // 标签位置：在顶部
        formatter: "{c}", // 标签内容格式，这里用 {c} 表示数据值
      },
      barWidth: "40px",
      emphasis: { focus: "series" },
      data: arr1,
    },
    {
      name: "未开启人数",
      type: "bar",
      label: {
        show: true, // 显示标签
        position: "top", // 标签位置：在顶部
        formatter: "{c}", // 标签内容格式，这里用 {c} 表示数据值
      },
      emphasis: { focus: "series" },
      barWidth: "40px",
      data: arr2,
    },
  ];
  console.log("aaa", aa);
  return aa;
});

let xAxisData = computed(() => {
  let data = [];
  list.value.forEach((element) => {
    data.push(element.name);
  });
  return data;
});

async function search() {
  list.value = await proxy.$apis.moxueyuanReport(params.value);
  console.log("魔学院", list.value);
  console.log("props.gridHeight", props.gridHeight);
}

watch(
  () => params.value,
  (newValue, oldValue) => {
    if (newValue) search();
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.container {
}
</style>
